<template>
  <div>
    <el-card class='box-card box-cardCustomer'>
      <div slot='header'
           class='clearfix'
           @click='cardExpanChange'>
        <img class='firstIcon'
             src='@/assets/ticket/note.png'>
        <span class='spantitle'>{{ $t('custom.nextTicket.notes') }}</span>
        <div class="title_btn" style="float:right">
          <span style="margin-right: 10px;color: #f0f0f0;">|</span>
            <el-tooltip :open-delay="1000" :content="'Click to '+ expandAllVal" placement="top">
              <el-switch
                v-model="expandAllVal"
                @click.stop.native
                style="margin-right:10px"
                active-color="#409eff"
                inactive-color="#dcdfe6"
                @change="data=>onStateChange(data)"
                active-value="Expand All"
                inactive-value="Collapse All">
              </el-switch>
            </el-tooltip>
          <i :class='arrowCustomer'></i>
        </div>
      </div>
      <el-collapse-transition>
        <div v-show='showPanel'
             class='box-cardCustomer-content'>
          <el-row class='table1row' v-if="nextTicketType.replace('dataset','')  === 'autotask'">
            <el-collapse v-for='(item,index) in notedata'
                         :key='index'>
              <el-card class='box-card box-cardCustomer'>
                <div slot='header'
                     class='clearfix tablerow2'
                     @click='rowCardExpanChange(item,index)'>
                  <el-avatar class='firstchar' :size="24"></el-avatar>
                  <span style='line-height:30px;margin-left:0px;'>{{item.title?item.title:''}}</span>
                  <span>{{item.createDateTime?item.createDateTime:'' | ClientFormat}}</span>
                  <!-- <span v-html="item.description"></span> -->
                  <!-- <span>{{item.description}}</span> -->
                  <i :class='item.arrowCustomer'></i>
                </div>
                <el-collapse-transition>
                  <div v-show='item.showPanel'
                       class='box-cardCustomer-content'>
                    <el-row class='table1row screen-y scroll-css'>
                      {{item.description}}
                    </el-row>
                  </div>
                </el-collapse-transition>
              </el-card>
            </el-collapse>
          </el-row>
          <el-row class='table1row' v-else-if="nextTicketType.replace('dataset','')  === 'syncro'">
            <el-collapse v-for='(item,index) in notedata'
                         :key='index'>
              <el-card class='box-card box-cardCustomer'>
                <div slot='header'
                     class='clearfix tablerow2'
                     @click='rowCardExpanChange(item,index)'>
                  <el-avatar class='firstchar' :size="24"></el-avatar>
                  <span style='line-height:30px;margin-left:0px;'>{{item.body?item.body:''}}</span>
                  <span>{{item.created_at?item.created_at:'' | ClientFormat}}</span>
                  <!-- <span v-html="item.description"></span> -->
                  <!-- <span>{{item.description}}</span> -->
                  <i :class='item.arrowCustomer'></i>
                </div>
                <el-collapse-transition>
                  <div v-show='item.showPanel'
                       class='box-cardCustomer-content'>
                    <el-row class='table1row screen-y scroll-css'>
                      {{item.description}}
                    </el-row>
                  </div>
                </el-collapse-transition>
              </el-card>
            </el-collapse>
          </el-row>
          <el-row class='table1row' v-else-if="nextTicketType.replace('dataset','')  === 'kaseyabms'">
            <el-collapse v-for='(item,index) in notedata'
                         :key='index'>
              <el-card class='box-card box-cardCustomer'>
                <div slot='header'
                     class='clearfix tablerow2'
                     @click='rowCardExpanChange(item,index)'>
                  <el-avatar class='firstchar' :size="24"></el-avatar>
                  <!-- <span style='line-height:30px;margin-left:0px;'>{{item.body?item.body:''}}</span> -->
                  <span>{{item.CreatedOn?item.CreatedOn:'' | ClientFormat}}</span>
                  <!-- <span v-html="item.description"></span> -->
                  <!-- <span>{{item.description}}</span> -->
                  <i :class='item.arrowCustomer'></i>
                </div>
                <el-collapse-transition>
                  <div v-show='item.showPanel'
                       class='box-cardCustomer-content'>
                    <el-row class='table1row screen-y scroll-css'>
                      <span v-html="item.NoteSummary"></span>
                    </el-row>
                  </div>
                </el-collapse-transition>
              </el-card>
            </el-collapse>
          </el-row>
          <el-row class='table1row' v-else-if="nextTicketType.replace('dataset','')  === 'jira'">
            <el-collapse v-for='(item,index) in notedata'
                         :key='index'>
              <el-card class='box-card box-cardCustomer'>
                <div slot='header'
                     class='clearfix tablerow2'
                     @click='rowCardExpanChange(item,index)'>
                  <div style="width:50px">
                    <el-avatar class='firstchar' :size="24"></el-avatar>
                  </div>
                  <div style="width:calc(100% - 250px)">{{item.body?item.body:''}}</div>
                  <div>{{item.created?item.created:''|ClientFormat}}</div>
                  <i :class='item.arrowCustomer'></i>
                </div>
                <el-collapse-transition>
                  <div v-show='item.showPanel'
                       class='box-cardCustomer-content'>
                    <el-row class='table1row screen-y scroll-css'>
                      <span v-html="item.NoteSummary"></span>
                    </el-row>
                  </div>
                </el-collapse-transition>
              </el-card>
            </el-collapse>
          </el-row>
          <el-row class='table1row' v-else-if="nextTicketType.replace('dataset','')  === 'halo'">
            <el-collapse v-for='(item,index) in notedata'
                         :key='index'>
              <el-card class='box-card box-cardCustomer halo_el_card'>
                <div slot='header'
                     class='clearfix tablerow2'
                     @click='rowCardExpanChange(item,index)'>
                  <div style="width:50px">
                    <el-avatar class='firstchar' :size="24"></el-avatar>
                  </div>
                  <div  style="width:calc(100% - 250px);line-height: 24px;">
                    <div>{{item.who}}</div>
                    <div>{{item.outcome}}</div>
                    <div>{{item.new_status_name}}</div>
                    <div>Time Taken:{{ item.timetaken }}</div>
                  </div>
                  <div>{{item.datetime?item.datetime:''|ClientFormat}}</div>
                  <i :class='item.arrowCustomer'></i>
                </div>
                <el-collapse-transition>
                  <div v-show='item.showPanel'
                       class='box-cardCustomer-content'>
                    <el-row class='table1row screen-y scroll-css'>
                      <span v-html="item.note"></span>
                    </el-row>
                  </div>
                </el-collapse-transition>
              </el-card>
            </el-collapse>
          </el-row>
          <el-row class='table1row' v-else>
            <el-collapse v-for='(item,index) in notedata'
                         :key='index'>
              <el-card class='box-card box-cardCustomer'>
                <div slot='header'
                     class='clearfix tablerow2'
                     @click='rowCardExpanChange(item,index)'>
                  <el-avatar class='firstchar' :size="24">{{item.firstChar?item.firstChar:''}}</el-avatar>
                  <span style='line-height:30px;margin-left:0px;'>{{item.username?item.username:''}}</span>
                  <span>{{item.createdTime?item.createdTime:'' | ClientFormat}}</span>
                  <span v-html="item.description"></span>
                  <!-- <span>{{item.description}}</span> -->
                  <i :class='item.arrowCustomer'></i>
                </div>
                <el-collapse-transition>
                  <div v-show='item.showPanel'
                       class='box-cardCustomer-content'>
                    <el-row class='table1row screen-y scroll-css'
                            v-html="item.description">
                      <!-- {{item.description}} -->
                    </el-row>
                  </div>
                </el-collapse-transition>
              </el-card>
            </el-collapse>
          </el-row>
        </div>
      </el-collapse-transition>
    </el-card>
  </div>
</template>

<script>
export default {
  props: {
    nextTicketInfo: {
      type: Object,
      default: function () {
        return {}
      }
    },
    nextTicketType: {
      type: String,
      default: null
    }
  },
  data () {
    return {
      expandAllVal: 'Collapse All',
      notedata: [],
      arrowCustomer: 'el-collapse-item__arrow el-icon-arrow-right is-active  el-icon-arrowCustomer',
      showPanel: true,
      activePannel: ['pannel'],
      activeNotesPannel: ['pannel'],
      notesDataList: [],
      timeEntryList: []
    }
  },
  computed: {
    comDescriptionDataList () {
      var descriptionList = []
      descriptionList = this._.sortBy(this._.filter(this.notesDataList, { detailDescriptionFlag: true }), 'createdTime')
      return descriptionList[0]
    }
  },
  watch:{
    "notedata":{
      handler(val){
        let isSwitch =  val.every(item=>item.showPanel===true)
        if(isSwitch) {
          this.expandAllVal = 'Expand All'
        } else {
           this.expandAllVal = 'Collapse All'
        }
      },
      deep:true
    }
  },
  created () {
    this.comNotesDataList()
  },
  methods: {
    onStateChange (val) {
      if (this.notedata) {
        this.notedata.forEach(element => {
          element.showPanel = !element.showPanel
          if (this.expandAllVal === 'Collapse All') {
            element.arrowCustomer = 'el-collapse-item__arrow el-icon-arrow-right el-icon-arrowCustomer'
          } else if (this.expandAllVal === 'Expand All') {
            element.arrowCustomer = 'el-collapse-item__arrow el-icon-arrow-right is-active  el-icon-arrowCustomer'
          }
        })
      }
    },
    comNotesDataList () {
      var notesList = []
      if (this.nextTicketType.replace('dataset','')  === 'autotask') this.initMergeData()
      notesList = this.notesDataList
      if (this.nextTicketType.replace('dataset','')  === 'autotask') {
        this.notedata = this.addItemShowPanel(notesList)
        return
      }
      for (let index = 0; index < notesList.length; index++) {
        if (notesList[index].username) {
          notesList[index].firstChar = notesList[index].username[0]
        }
        notesList[index].arrowCustomer = 'el-collapse-item__arrow el-icon-arrow-right el-icon-arrowCustomer'
        notesList[index].rowexpan = true
      }
      this.notedata = this.addItemShowPanel(notesList)
      // return notesList
    },
    addItemShowPanel (notesList) {
      notesList.forEach(element => {
        if (this.expandAllVal === 'Collapse All') {
          // element.showPanel = false
          element.arrowCustomer = 'el-collapse-item__arrow el-icon-arrow-right el-icon-arrowCustomer'
        } else if (this.expandAllVal === 'Expand All') {
          // element.showPanel = true
          element.arrowCustomer = 'el-collapse-item__arrow el-icon-arrow-right is-active  el-icon-arrowCustomer'
        }
      })
      return notesList
    },
    expanChangeClass (classname) {
      return classname === 'el-collapse-item__arrow el-icon-arrow-right el-icon-arrowCustomer'
        ? 'el-collapse-item__arrow el-icon-arrow-right is-active  el-icon-arrowCustomer'
        : 'el-collapse-item__arrow el-icon-arrow-right el-icon-arrowCustomer'
    },
    cardExpanChange () {
      this.arrowCustomer = this.expanChangeClass(this.arrowCustomer)
      this.showPanel = !this.showPanel
    },
    rowCardExpanChange (item, index) {
      item.arrowCustomer = this.expanChangeClass(item.arrowCustomer)
      item.showPanel = !item.showPanel
      this.$set(this.notedata, index, item)
    },
    initData (id) {
      this.$nextTick(() => {
        if (id) {
          this.getTimeEntryListData(id)
        }
      })
    },
    initMergeData () {
      var _self = this
      this.notesDataList = []
      _self.notesDataList = _self._.union(_self.notesDataList, _self.timeEntryList)
    },
    getTimeEntryListData (ticketId) {
      const params = {
        tenantCode: this.$store.state.user.tenantCode,
        ticketId: ticketId,
        type: this.nextTicketType
      }
      if (this.nextTicketType.replace('dataset','')  === 'autotask' || this.nextTicketType.replace('dataset','')  === 'syncro' || this.nextTicketType.replace('dataset','')  === 'kaseyabms' || this.nextTicketType.replace('dataset','')  === 'jira' || this.nextTicketType.replace('dataset','')  === 'halo') {
        this.$interface.apiManager.getAutoTaskTicketNotes(params, this.$store.state.user.tenantCode, this.nextTicketInfo.id).then(({ data: res }) => {
          if (res.code !== 0) {
            return this.$message.error(res.msg)
          }
          if (this.nextTicketType.replace('dataset','')  === 'syncro') {
            this.notedata = res.data.ticket.comments
          } else if (this.nextTicketType.replace('dataset','')  === 'kaseyabms'||this.nextTicketType.replace('dataset','')  === 'jira'||this.nextTicketType.replace('dataset','')  === 'halo') {
            this.notedata = res.data
            this.addItemShowPanel(this.notedata)
          } else {
            this.timeEntryList = res.data.items
            this.comNotesDataList()
          }
        })
      } else {
        this.getNoteDataList(ticketId)
      }
    },
    initTempTimeEntryList (timeEntryList) {
      var temptimeEntryList = []
      for (let index = 0; index < timeEntryList.length; index++) {
        const element = timeEntryList[index]
        temptimeEntryList.push({
          createdTime: element.dateEntered ? element.dateEntered : '',
          username: element.memberName ? element.memberName : '',
          description: element.notes ? element.notes : '',
          detailDescriptionFlag: element.addToDetailDescriptionFlag ? element.addToDetailDescriptionFlag : ''
        })
      }
      return temptimeEntryList
    },
    getNoteDataList (ticketId) {
      const params = {
        clientCode: this.$store.state.user.tenantCode,
        ticketId: ticketId
      }
      this.$interface.nextTicket.getNotesListApi(params).then(({ data: res }) => {
        if (res.code !== 0) {
          this.comNotesDataList()
          return this.$message.error(res.msg)
        }
        this.notesDataList = this.initTempNotesList(res.data)
        this.comNotesDataList()
      })
    },
    initTempNotesList (notesList) {
      var tempNotesList = []
      for (let index = 0; index < notesList.length; index++) {
        const element = notesList[index]
        tempNotesList.push({
          createdTime: element.dateCreated ? element.dateCreated : '',
          username: element.member ? element.member.name : '',
          description: element.text ? element.text : '',
          detailDescriptionFlag: element.detailDescriptionFlag ? element.detailDescriptionFlag : ''

        })
      }
      return tempNotesList
    },
    notesFormat (notes) {
      if (notes) {
        const tempData = notes.replace(/\n/gm, '<br/>')
        return this.notesFormatIncludingImg(tempData)
      } else {
        return ''
      }
    },
    notesFormatIncludingImg (inputData) {
      const allArr = inputData.split('==')
      if (allArr.length && allArr.length > 0) {
        const reg = new RegExp(/data:image\/.*;base64.*?==/)
        const reAllArr = allArr.map((item, index) => {
          if (index !== allArr.length - 1) {
            item = item + '=='
          }
          const base64Img = item.match(reg)
          if (base64Img && base64Img.length && base64Img.length > 0) {
            return item.replace(
              reg,
              `<img style='width:120px;height:74px;margin:4px;border-radius:3px;border:1px solid #ddd;box-shadow:0 0 5px #ddd;' src='${base64Img[0]
              }' />`
            )
          } else {
            return item
          }
        })
        return reAllArr.join()
      } else {
        return inputData
      }
    }
  }
}
</script>
<style scoped>
.box-cardCustomer >>> .el-card__body {
  padding: 0px !important;
}
.box-cardCustomer >>> .el-card__header {
  cursor: pointer;
  height: 59px;
  padding: 18px 10px;
}
.box-cardCustomer >>> .halo_el_card .el-card__header {
  cursor: pointer;
  height: 100px;
  padding: 18px 10px;
}
.box-cardCustomer-content >>> .el-card__header {
  padding: 8px 0px;
  border: none;
}
.box-cardCustomer-content >>> .el-card {
  border: none;
}
.box-cardCustomer >>> .el-avatar {
  background: #138dc7;
}
.box-cardCustomer >>> .el-collapse {
  border: none;
}
.box-cardCustomer >>> .is-always-shadow {
  box-shadow: none;
}

.title_btn{
  display: flex;
  justify-content: flex-end;
  align-items: center;
}
.spantitle {
  height: 22px;
  font-size: 16px;
  font-weight: 500;
  color: rgba(0, 0, 0, 0.85);
  line-height: 22px;
}
.firstIcon {
  height: 20px;
  width: 20px;
  margin-top: -4px;
}
.firstChar {
  margin-right: 0px;
}
.screen-y{
  overflow:auto;
  max-height:350px;
  white-space: pre-line;
  word-break: normal;
}
.clearfix > span:nth-child(2) {
  margin-left: 10px;
  height: 22px;
  font-weight: 500;
  color: rgba(0, 0, 0, 0.85);
}
.table1row {
  line-height: 30px;
  text-align: left;
}
.box-cardCustomer-content {
  padding: 20px 10px 20px 40px;
}
.clearfix {
  vertical-align: middle;
  text-align: left;
}
.el-icon-arrowCustomer {
  float: right;
  padding: 3px 0;
}
.tablerow2 {
  display: flex;
  height: 30px;
  line-height: 30px;
}
.tablerow2 > i {
  line-height: 30px;
}
.tablerow2 > span {
  margin-right: 10px;
}
.tablerow2 > span:nth-child(2) {
  height: 20px;
  font-weight: 600;
  color: #138dc7;
}
.tablerow2 > span:nth-child(3) {
  height: 20px;
  font-weight: 500;
  color: rgba(0, 0, 0, 0.5);
}
.tablerow2 > span:nth-child(4) {
  font-weight: 400;
  color: rgba(0, 0, 0, 0.25);
  overflow: hidden;
  text-overflow: ellipsis;
  -o-text-overflow: ellipsis;
  white-space: nowrap;
  width: 340px;
  display: block;
}
</style>
